<!--客户详情-->
<template>
  <div>
    <el-dialog
      title="客户进件信息"
      :visible.sync="centerDialogVisible"
      width="35%"
      @close="cancel"
      center
    >
      <el-form
        v-loading="formLoading"
        size="small"
        :inline="true"
        label-width="auto"
        class="demo-form-inline"
      >
        <el-form-item label="公司名称：">
          <span v-html-no="{ action: info.companyName }"></span>
        </el-form-item>
        <el-form-item label="申请人姓名：">
          <span v-html-no="{ action: info.name }"></span>
        </el-form-item>

        <el-form-item label="申请人身份证：">
          <span v-html-no="{ action: info.idCard }"></span>
        </el-form-item>

        <el-form-item label="申请人身份：">
          <span v-html-no="{ action: info.applyType }"></span>
        </el-form-item>

        <el-form-item label="申请人手机：">
          <span v-html-no="{ action: info.phone }"></span>
        </el-form-item>

        <el-form-item label="申请城市：">
          <span v-html-no="{ action: info.wholeName }"></span>
        </el-form-item>

        <el-form-item label="申请期限：">
          <span v-html-no="{ action: info.applyTerm }"></span>
        </el-form-item>

        <el-form-item label="申请金额：">
          <span v-html-no="{ action: info.applyAmount }"></span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getCustomerDetail } from "@/api/commission";
export default {
  props: {
    show: {
      type: Boolean,
      default: () => false
    },
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    show: {
      handler(val) {
        val && this.getInfo();
        this.centerDialogVisible = val;
      }
    }
  },
  data() {
    return {
      centerDialogVisible: false,
      info: {},
      formLoading: false
    };
  },
  methods: {
    getInfo() {
      this.formLoading = true;
      getCustomerDetail(this.detailInfo.orderId)
        .then(res => {
          this.info = res.data;
          this.formLoading = false;
        })
        .finally(() => {
          this.formLoading = false;
        });
    },
    cancel() {
      this.centerDialogVisible = false;
      this.$emit("cancel", false);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select,
/deep/ .el-input {
  width: 540px;
}
/deep/ .el-dialog__body {
  padding-left: 60px;
}
/deep/ .el-form-item {
  display: block;
}
/deep/ .el-form-item__label {
  color: #222222;
  font-weight: 400;
  font-size: 16px;
}
/deep/ .el-form-item__content {
  color: #222222;
  font-size: 16px;
}
/deep/ .el-dialog__title {
  color: #222222;
  font-size: 16px;
  font-weight: 500;
}
</style>
